<template>
  <footer class="footer" v-if="list.length > 0">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{ unCompleted.length }}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li v-for="tab in tabs" :key="tab">
        <a :class="{ selected: tab === active }" :href="`#/${tab}`" @click="changeActive(tab)">{{ tab }}</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="clear" v-if="completed.length > 0">Clear completed</button>
  </footer>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import useStore from '../store'
import type { TActive } from '../types/data'
const { main, footer } = useStore()
const { clearCompleted } = main
const { completed, unCompleted, list } = storeToRefs(main)
const { tabs, active } = storeToRefs(footer)
const { changeActive } = footer

function changeHash() {
  const hs = window.location.hash
  const result = (hs === '#/Active' || hs === '#/Completed' ? hs.slice(2) : 'All') as TActive
  changeActive(result)
}

changeHash()

function clear() {
  clearCompleted()
}
</script>

<style scoped lang="less">

</style>
